<template>
  <div class="OrderList">
    <CommonHeader title="订单列表">
      <template #left>
        <div>
          <Icon name="zuojiantou"></Icon>
          <span>返回</span>
        </div>
      </template>
    </CommonHeader>
    <div class="order">
      <!-- tabs切换 -->
      <div class="tabs">
        <div
          class="tabs-item"
          v-for="(item, index) in tabsCard"
          :key="index"
          ref="tabItems"
          @click="setUnderline(index)"
          :class="{ active: currentIndex === index }"
        >
          <span>{{ item.label }}</span>
        </div>
        <!-- line -->
        <!-- 下划线 -->
        <div
          class="underline"
          :style="{
            width: underlineWidth + 'px',
            left: underlineLeft + 'px',
          }"
        ></div>
      </div>

      <!-- 订单列表 -->
      <div class="order-content">
        <div class="order-list">
          <div v-if="currentOrderList.length">
            <div
              class="item"
              v-for="(item, index) in currentOrderList"
              :key="index"
            >
              <!-- 订单编号 -->
              <div class="order-num-header">
                <span>{{
                  item.ordernumber || item.orderNum || '未知编号'
                }}</span>
                <span class="order-status">
                  {{
                    item.status === 0 ? '待支付' : item.orderStatus || '已支付'
                  }}
                </span>
              </div>

              <!-- 订单图片列表 -->
              <div class="order-img-list" v-if="item.child">
                <div
                  class="order-img-list-item"
                  v-for="child in item.child || [item]"
                  :key="child.goodsid || child.id"
                >
                  <div class="order-img-list-item-img">
                    <img
                      :src="
                        child.img
                          ? 'http://43.138.15.137:4000/' + child.img
                          : child.imgUrl
                      "
                      alt=""
                    />
                  </div>
                  <div class="info">
                    <span class="name">{{
                      child.goodsname || child.name || '商品名称'
                    }}</span>
                    <span class="desc">{{
                      child.goodsdesc || child.desc || '描述信息'
                    }}</span>
                    <span class="price"
                      >¥{{ child.price || child.orderPrice || '0.00' }}</span
                    >
                  </div>
                </div>
              </div>

              <!-- 订单金额 -->
              <div class="order-price">
                <span>共计{{ item.countnumber || 1 }}件商品</span>
                <span
                  >合计:<span class="price"
                    >¥{{ item.countmoney || item.orderPrice || '0.00' }}</span
                  ></span
                >
              </div>

              <!-- 操作区 -->
              <div class="order-opt">
                <span class="pay opt">继续支付</span>
                <span class="cancel opt">取消交易</span>
                <span class="logistics opt">查看物流</span>
              </div>
            </div>
          </div>

          <!-- 空订单 -->
          <div class="empty-order" v-else>
            <Icon name="zanwudingdan" size="100px" />
            <span>暂无订单</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/common/publicHeader/index.vue';

import Icon from '@/components/common/Icon/index.vue';
import { getOrderListAPI } from '@/api/my';

export default {
  name: 'orderlist',
  components: {
    CommonHeader,
    Icon,
  },
  data() {
    return {
      // 将四个列表合并为一个数组，索引对应 tab 的 index
      orderLists: [[], [], [], []], // [待付款, 待发货, 待收货, 全部订单]

      underlineWidth: 0,
      underlineLeft: 0,
      currentIndex: 0, // 当前选中的 tab 索引
      tabsCard: [
        {
          label: '待付款',
          value: '1',
        },
        {
          label: '待发货',
          value: '2',
        },
        {
          label: '待收货',
          value: '3',
        },
        {
          label: '全部订单',
          value: '4',
        },
      ],
    };
  },
  mounted() {
    this.initUnderline();
    this.getOrderList();
  },
  methods: {
    initUnderline() {
      this.$nextTick(() => {
        const firstTab = this.$refs.tabItems[0];
        // ✅ 获取组件内部的原生 DOM 元素
        const dom = firstTab.$el || firstTab;
        this.underlineWidth = dom.offsetWidth;
        this.underlineLeft = dom.offsetLeft;
      });
    },
    setUnderline(index) {
      this.getOrderList(1, index);
      // 切换 tab 时，更新下划线的位置和宽度
      this.currentIndex = index;
      this.$nextTick(() => {
        const tab = this.$refs.tabItems[index];
        const dom = tab.$el || tab; // 兼容普通元素
        this.underlineWidth = dom.offsetWidth;
        this.underlineLeft = dom.offsetLeft;
      });
    },

    // 获取订单列表
    async getOrderList(page = 1, status = 0) {
      const { uid } = JSON.parse(localStorage.getItem('userinfo'));
      const res = await getOrderListAPI({
        uid,
        page,
        size: 5,
        status,
      });

      if (res.list && res.list.data) {
        // 使用 $set 确保响应式更新
        this.$set(this.orderLists, status, res.list.data);
      } else {
        this.$set(this.orderLists, status, []);
      }
    },
  },
  computed: {
    currentOrderList() {
      return this.orderLists[this.currentIndex];
    },
  },
};
</script>

<style lang="scss" scoped>
.OrderList {
  background-color: #f2f2f2;
  height: 100%;
  .order {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .tabs {
    height: 50px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 10px;

    .tabs-item {
      height: 100%;
      line-height: 50px;
      text-align: center;
      font-size: 15px;
      color: #333;
      transition: all 0.3s ease;

      &.active {
        color: #ff6140;
        font-size: 16px;
      }
    }

    .underline {
      height: 4px;
      background-color: #ff6140;
      position: absolute;
      bottom: 6px;
      border-radius: 2px;
      transition: left 0.3s ease, width 0.3s ease;
    }
  }

  .order-content {
    flex: 1;
    padding: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;

    .order-list {
      .item {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 10px;
        background-color: #fff;

        .order-num-header {
          height: 40px;
          font-size: 16px;
          color: #333;
          border-bottom: 1px solid #f2f2f2;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .order-status {
            color: #ccc;
          }
        }

        .order-img-list {
          margin-top: 10px;

          .order-img-list-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            background-color: #fafafa;
            padding: 10px;
            border-radius: 10px;

            .order-img-list-item-img {
              width: 80px;
              height: 80px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .info {
              flex: 1;
              display: flex;
              flex-direction: column;
              margin-left: 10px;

              .name {
                font-size: 16px;
                color: #333;
              }

              .desc {
                font-size: 14px;
                color: #999;
              }

              .price {
                font-size: 14px;
                color: #ff6140;
                margin-top: auto;
              }
            }
          }
        }

        .order-price {
          margin-top: 10px;
          display: flex;
          justify-content: end;
          align-items: center;
          font-size: 14px;
          color: #999;
          gap: 10px;

          .price {
            font-size: 14px;
            color: #ff6140;
          }
        }

        .order-opt {
          margin-top: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          color: #999;
          gap: 10px;

          .opt {
            padding: 5px 10px;
            border-radius: 5px;
            border: 1px solid #ff6140;
            color: #fff;
            background-color: #ff6140;
          }
        }
      }
    }

    .empty-order {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 50px;
      font-size: 14px;
      color: #999;
      gap: 10px;
    }
  }
}
</style>
